<script lang="ts">
export default {
  name: 'firm',
};
</script>
<script setup lang="ts">
import {
  reactive,
  ref,
  onMounted,
  toRefs,
} from 'vue';

import {
  ElForm,
} from 'element-plus';

import {
  Search,
  Refresh,
} from '@element-plus/icons-vue';
import {
  orderReport,
} from '@/api/engineer/index';
import { EngineerQuery, EngineerType } from '@/api/engineer/types';
import { listServiceTypeOptions } from '@/api/service-type';

const queryFormRef = ref(ElForm); // 查询表单

const state = reactive({
  // 遮罩层
  loading: false,
  // 选中数组
  ids: [] as number[],
  // 总条数
  total: 0,
  time:[] as string[],
  engineerList: [] as EngineerType[],
  dialog: {
    visible: false,
  } as DialogType,
  formData: {} as EngineerType,
  serviceTypeOptions: [] as OptionType[],
  serviceTypeLabelOptions: [] as OptionType[],
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  } as unknown as EngineerQuery,
  rules: {
    engineerRealname: [
      { required: true, message: '请输入真实姓名', trigger: 'blur' },
    ],
    engineerSex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
    typeIds: { required: true, message: '请选择服务类型', trigger: 'blur' },
    idcard: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
    phone: [
      { required: true, message: '请输入手机号码', trigger: 'blur' },
      {
        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        message: '请输入正确的手机号码',
        trigger: 'blur',
      },
    ],
  },
});

let {
  loading,
  queryParams,
  serviceTypeOptions,
  engineerList,
  total,
  time
} = toRefs(state);

/**
 * 查询
 */
function handleQuery() {
  loading.value = true;
  console.log(state.queryParams);

  orderReport(state.queryParams).then(({ data }) => {
    state.engineerList = data.list;
    state.total = data.total;
    state.loading = false;
  });
}
function changeTime(e: string []){

  if (e && e.length) {
    state.queryParams.startTime = e[0]
    state.queryParams.endTime = e[1]
  }else{
    state.queryParams.startTime = undefined
    state.queryParams.endTime = undefined
  }
}
/**
 * 重置查询
 */
function resetQuery() {

  queryFormRef.value.resetFields();
  handleQuery();
}



async function getServiceTypeOptions() {
  listServiceTypeOptions().then((response) => {
    state.serviceTypeOptions = response.data;
  });
}

onMounted(() => {
  handleQuery();
  getServiceTypeOptions();
});
</script>
<template>
  <div class="app-container">
    <div class="search">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="用工类型">
          <el-select v-model="queryParams.typeId" placeholder="请选择用工类型签" clearable style="width: 200px">
            <el-option :label="item.label" :value="item.value" v-for="item in serviceTypeOptions" :key="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="下单类型">
          <el-select v-model="queryParams.principalType" placeholder="请选择下单类型" clearable style="width: 200px">
            <el-option label="企业" value="1" />
            <el-option label="个人" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item prop="principalName" label="下单人">
          <el-input v-model="queryParams.principalName" placeholder="请输入姓名进行搜索" clearable @keyup.enter="handleQuery" style="width: 200px" />
        </el-form-item>
        <el-form-item prop="phone" label="用工时间">
          <el-date-picker
            v-model="time"
            type="datetimerange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD"
            @change="changeTime"
            date-format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
          <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card>
      <template #header>
      </template>

      <el-table ref="dataTableRef" v-loading="loading" :data="engineerList" highlight-current-row border>
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column type="index" width="55" align="center" />
        <el-table-column label="用工类型" align="center" prop="typeName"  />
        <el-table-column label="下单类型" align="center" prop="principalTypeName"  />
        <el-table-column label="下单公司" align="center" prop="principalName"  />
        <el-table-column label="下单金额" align="center" prop="orderAmount" />
        <el-table-column label="下单实付金额" align="center" prop="orderSFAmount" />
      </el-table>

      <!-- pagination -->
      <pagination v-if="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
    </el-card>
  </div>
</template>


<style scoped>
</style>
